<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="广告二维码内容操作">
                    <form class="form-inline" @submit.prevent v-el:sform>
                        <form-input title="商户名称" :up-table="true" :search="true" name="mchtName"></form-input>
                        <form-input title="广告二维码名称" :up-table="true" :search="true" name="baName"></form-input>
                        <span class="pull-right">
                            <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        <v-button theme="success" @click="add" class="pull-right">新增</v-button>
                        </span>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table></table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container @close="close" :title="operate==='create'?'新增广告二维码':'修改广告二维码'" v-el:add-modal v-ref:add-modal class="edit-modal">
            <advert-operate v-if="advertShow" v-ref:advert-operate @close="close" :edit-data="editData" :operate="operate" :mcht-name-options="mchtList"></advert-operate>
        </modal-container>
        <modal-container @close="timeclose" title="新增广告二维码时间" v-el:add-time-modal v-ref:add-time-modal class="edit-modal">
            <div class="modal-body">
              <time-operate v-ref:time-operate v-if="timeShow" operate="新增" :edit-data="editTimeData" @close="timeclose"></time-operate>
            </div>
        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        // dateTime,
        createDataTable
    } from "ui/collections/general.js";
    import {dateTransform} from "lib/method.js"
    import AdvertOperate from "./advert.operate.vue";
    import TimeOperate from "./time.operate";
    var serialize = require("form-serialize");
    
    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            _array: [],
            item: {},
            columnsSet: [],
            mchtList: [], //商户名称列表
            baIdList:[], //二维码列表
            mchtId: "",
            baId:"",
            operate: "create",
            editData: null,
            editTimeData: null,
            advertShow: false, //组件的生成由用户决定
            timeShow: false //组件的生成由用户决定
        }),
        components: {
            AdvertOperate,
            TimeOperate
        },
        methods: {
            //新增广告
            add() {
                if (this.operate !== "create") {
                    this.operate = "create";
                }
                this.advertShow = true;
                $(this.$els.addModal).modal("show");
            },
            //关闭广告操作dialog
            close(go) {
                if (go)  dataTable.draw(false); // 只有提交修改后才局部刷新页面
                // this.$refs.advertOperate.$destroy(); //强制注销组件
                this.advertShow = false;
                $(this.$els.addModal).modal("hide");
            },
            //关闭广告时间新增操作dialog
            timeclose() {
                this.$refs.timeOperate.$destroy(); //强制注销组件
                this.timeShow = false;
                $(this.$els.addTimeModal).modal("hide");
            },
            //还原弹出框位置
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function() {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function() {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            }
        },
        created() {
            //主页面datatable所用数组
            columnsSet = [{
                    title: "广告二维码id",
                    data: "baId",
                    visible: false,
                    className: "operate"
                },
                {
                    title: "商户id",
                    data: "mchtId",
                    visible: false,
                    readonly: true,
                    className: "operate"
                },
                {
                    title: "广告二维码名称",
                    data: "baName",
                    className: "wrap-width"
                },
                {
                    title: "商户名称",
                    data: "mchtName",
                    className: "operate"
                },
                // {
                //     title: "广告二维码图片",
                //     data: "picPath",
                //     upload: true,
                //     img: true,
                //     className: "operate",
                //     render: function(data) {
                //         return `<img class="table-avatar" src=` + data + `>`;
                //     }
                // },
                {
                    title: "状态",
                    data: "stat",
                    className: "operate",
                    options: [{
                        key: "开启",
                        value: 0
                    }, {
                        key: "关闭",
                        value: 1
                    }],
                    render: data => ["开启", "关闭"][data]
                },
                {
                    title: "定位标识",
                    data: "potFlag",
                    edit: true,
                    className: "operate",
                    options: [{
                        key: "是",
                        value: "0"
                    }, {
                        key: "否",
                        value: "1"
                    }],
                    render: data => ["是", "否"][data]

                },
                {
                    title: "签到日期",
                    data: "checkDate",
                    className: "operate",
                    render:function(data){
                        return dateTransform(data)
                    }
                },
                {
                    title: "店员名称",
                    data: "tlrName",
                    className: "operate"
                },
                {
                    title: "相关操作",
                    className: "operate",
                    width: "120px",
                    render: function(value, type, row) {
                       if(row.stat == '0'){
                           return `
                                <button type="button" class="btn btn-defalt btn-sm switch">关闭</button>
                                  `;
                       }else{
                           return `
                                <button type="button" readonly=${
                               row.stat === 0 ? true : false
                               } class="btn btn-primary btn-sm edit same">修改</button>
                                <button type="button" readonly=${
                               row.stat === 0 ? true : false
                               } class="btn btn-danger btn-sm delete same">删除</button>
                                <button type="button" readonly=${
                               row.stat === 0 ? true : false
                               } class="btn btn-danger btn-sm addTime same">新增时间</button>
                                <button type="button" class="btn btn-defalt btn-sm switch">开启</button>
                                  `;
                       }

                    }
                }
            ];
        },
        ready: async function() {
            this.$set("columnsSet", columnsSet);
            var self = this;
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function(data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.sform, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //广告二维码查询
                    var res = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/banner/search",
                        data:_data,
                        method: "POST"
                    });
                    if (res.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: res.content
                        });
                    }
                    callback({
                        recordsTotal: res.content.total || 0,
                        recordsFiltered: res.content.total || 0,
                        data: res.content.list || []
                    });
                }
            });
    
            $(self.$el).on("click", ".edit", function() {
                var Row = $(this).closest("tr").get(0);
                self.editData = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.operate = "edit";
                self.advertShow = true;
                $(self.$els.addModal).modal("show");
            });
    
            $(self.$el).on("click", ".delete", async function() {
                var Row = $(this).closest("tr").get(0);
                let baId = dataTable.row(Row).data().baId;
                let baName = dataTable.row(Row).data().baName;
                let baMchtId = dataTable.row(Row).data().baMchtId + '';
                var result = await Midway.confirm({
                    title: "删除广告二维码",
                    content: "是否要删除:" + baName + "?"
                });
                var result = await self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/qr/banner/" + baId +'/' + baMchtId,
                    method: "DELETE"
                });
                Midway.alert({
                    title: "操作提示",
                    content: "删除成功"
                });
                // dataTable.ajax.reload();
                dataTable.draw(false);
            });
            $(self.$el).on("click", ".addTime", async function() {
                var Row = $(this).closest("tr").get(0);
                self.editTimeData = Object.assign({},
                    JSON.parse(JSON.stringify(dataTable.row(Row).data()))
                );
                self.timeShow = true;
                $(self.$els.addTimeModal).modal("show");
            });
            $(self.$el).on("click", ".switch",async function() {
                var Row = $(this).closest("tr").get(0);
                let baId = dataTable.row(Row).data().baId;
                let baName = dataTable.row(Row).data().baName;
                let baMchtId = dataTable.row(Row).data().baMchtId + '';
                let stat = dataTable.row(Row).data().stat;

                if (stat == "1") {
                    await Midway.confirm({
                        title: "开启广告二维码",
                        content: "确认是否要开启:" + baName + "?"
                    })
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/banner/open/" + baId + "/" + baMchtId,
                        method: "post"
                    });
                } else {
                    await Midway.confirm({
                        title: "关闭广告二维码",
                        content: "确认是否要关闭:" + baName + "?"
                    })
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/banner/close/" + baId + "/" + baMchtId,
                        method: "post"
                    });
                }
                // dataTable.ajax.reload();
                //页面局部刷新 停留在当前页
                dataTable.draw(false);
            });
        },
        rules: {},
        beforeDestroy() {
            $(this.$el).off("click");
        }
    };
</script>


<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right: 10px;
    }
    
    .form-inline .form-group+.form-group {
        margin-left: 20px;
    }
</style>
